page {
    height: 100%;
}
.cates {
    height: 100%;
   .cates_container {
    // less中使用calc的时候要注意加~''
    // height 就是当前屏幕可见高度的1%，也就是说height:100vh == height:100%
    // 当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0
    // 但是设置height:100vh，该元素会被撑开屏幕高度一致
    height: ~'calc(100vh - 90rpx)'; // 90rpx是搜索框的高度
    display: flex;
     .left_menu {
         // 子项高度100% flex
        flex: 2; 
        // background-color: pink;
        .menu_item {
            display: flex;
            height: 80rpx;
            justify-content: center; // 水平居中
            align-items: center; // 垂直居中
            font-size: 30rpx;
        }
        .active {
            color: var(--themeColor); // 引用主题颜色
            border-left: 5rpx solid currentColor; // 字体颜色
        }
     }
     .right_content {
         // 子项高度100% flex
        flex: 5;
        // background-color: green;
        .goods_group {
            .goods_title {
                height: 80rpx;
                text-align: center;
                display: flex;
                justify-content: center;
                align-items: center;
                .delimeter {
                    color: #ccc;
                    padding: 0 10rpx;
                }
            }
            .goods_list {
                display: flex;
                flex-wrap: wrap; // 换行
                navigator {
                    width: 33.33%;
                    text-align: center;
                    image {
                        width: 50%;
                    }
                }
            }
        }
     }
   }

}